<template>
    <NuxtLayout name="default">
        <div class="layout-user-container">
            <div class="left-menu-container">
                <template v-for="(item, index) in tabMenus" :key="index">
                    <NuxtLink
                        v-if="item.type === 'router' && item.open"
                        class="menu-item"
                        :class="activeMenu === item.path ? 'active' : ''"
                        :to="item.path"
                    >
                        <icon :name="item.icon" size="18" />
                        <span class="ml-2">{{ item.name }}</span>
                    </NuxtLink>
                    <NuxtLink
                        v-else-if="item.type === 'click' && item.open"
                        class="menu-item"
                        @click="handleClick(item.path)"
                    >
                        <icon :name="item.icon" size="18" />
                        <span class="ml-2">{{ item.name }}</span>
                    </NuxtLink>
                </template>

            </div>
            <div v-if="!firstLoading" class="right-main-container">
                <NuxtPage />
            </div>
        </div>
    </NuxtLayout>
</template>

<script setup lang="ts">
import feedback from '~/utils/feedback'
import useUserStore from '~/stores/user'

// 首次加载
const firstLoading = ref(true)

// 激活菜单
const route = useRoute()
const router = useRouter()
const activeMenu = computed<string>(() => route.path)

// 导航菜单
const tabMenus: Ref<any> = ref([
    {
        open: true,
        type: 'router',
        name: '个人信息',
        icon: 'el-icon-User',
        path: '/user/center'
    },
    {
        open: true,
        type: 'router',
        name: '在线充值',
        icon: 'el-icon-Postcard',
        path: '/user/recharge'
    },
    {
        open: true,
        type: 'router',
        name: '订阅套餐',
        icon: 'el-icon-Medal',
        path: '/user/subscribe'
    },
    {
        open: true,
        type: 'router',
        name: '账单记录',
        icon: 'el-icon-Tickets',
        path: '/user/billing'
    },
    {
        open: true,
        type: 'router',
        name: '账户明细',
        icon: 'el-icon-Notebook',
        path: '/user/balance'
    },
    {
        open: true,
        type: 'router',
        name: '账号安全',
        icon: 'el-icon-Lock',
        path: '/user/safer'
    },
    {
        open: true,
        type: 'router',
        name: '通知',
        icon: 'el-icon-Bell',
        path: '/user/notice'
    },
    {
        open: true,
        type: 'click',
        name: '登出',
        icon: 'el-icon-SwitchButton',
        path: 'logout'
    }
])

const handleClick = (type: string) => {
    if (type === 'logout') {
        feedback.confirm('您确定要退出登录吗?')
            .then(() => {
                useUserStore().logout()
                router.push('/')
            }).catch(() => {})
    }
}

onMounted(() => {
    setTimeout(() => {
        firstLoading.value = false
    })
})

definePageMeta({
    auth: false
})
</script>

<style scoped lang="scss">
.layout-user-container {
    position: relative;
    display: flex;
    height: 100%;
    background-color: var(--el-bg-color);
    border-radius: 8px;
    box-shadow: 0 0 2px 0 rgb(0 0 0 / 10%);
    .left-menu-container {
        width: 200px;
        min-width: 200px;
        padding: 15px;
        border-right: 1px solid var(--el-border-color-light);
        .menu-item {
            display: flex;
            align-items: center;
            padding: 9px 10px;
            margin-bottom: 10px;
            font-size: 14px;
            color: var(--el-text-color-regular);
            cursor: pointer;
            border-radius: 8px;
            &:hover:not(.active) {
                color: var(--el-color-primary);
                background-color: var(--el-bg-color-page);
            }
            &.active {
                font-weight: 500;
                color: var(--el-color-primary);
                background-color: var(--el-color-primary-light-9);
            }
        }
    }
    .right-main-container {
        flex: 1;
        overflow: auto;
    }
}
</style>
